<template>
  <div>
    <div class="addBtns">
      <el-button
        v-powerbtn="{power: 'business-product-insert'}"
        type="primary"
        size="mini"
        round
        icon="el-icon-circle-plus-outline"
        @click="create"
      >新建</el-button>
      <div v-if="status === 'first1' || status === 'second1'" class="inlineBlock">
        <el-button
          v-powerbtn="{power: 'business-product-toCheck'}"
          :disabled="checkStatus"
          type="primary"
          size="mini"
          round
          icon="el-icon-success"
          @click="getChangeStatus()"
        >提交审核</el-button>
      </div>
      <div
        v-if="status === 'first1' || status === 'second1' || status === 'fourth1'"
        class="inlineBlock"
      >
        <el-button
          v-powerbtn="{power: 'business-product-downLine'}"
          :disabled="changeOut"
          type="primary"
          size="mini"
          round
          icon="el-icon-error"
          @click="upline()"
        >批量下线</el-button>
      </div>
    </div>
    <div class="app-table">
      <el-table
        ref="multipleTable"
        highlight-current-row
        :data="list"
        border
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column fixed label="产品组ID">
          <template slot-scope="scope">
            <el-popover
              v-if="scope.row.productGroupId"
              :content="scope.row.productGroupId"
              placement="top"
              trigger="hover"
            >
              <span slot="reference" style="cursor:pointer">{{ scope.row.productGroupId }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column fixed width="100" label="产品组名称">
          <template slot-scope="scope">
            <el-popover
              v-if="scope.row.name"
              :content="scope.row.name"
              placement="top"
              trigger="hover"
            >
              <span slot="reference" style="cursor:pointer">{{ scope.row.name }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="所属平台" width="180px">
          <template slot-scope="scope">
            <el-popover
              v-if="scope.row.platformName"
              :content="scope.row.platformName"
              placement="top"
              trigger="hover"
            >
              <span slot="reference" style="cursor:pointer">{{ scope.row.platformName }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="产品组上线状态" width="110px">
          <template slot-scope="scope">{{ scope.row.productExistsStatus === '0' ? '下线' : '上线' }}</template>
        </el-table-column>

        <el-table-column label="当前配置上线状态" width="125px">
          <template slot-scope="scope">{{ scope.row.status === '0' ? '上线' : '下线' }}</template>
        </el-table-column>

        <el-table-column label="产品组类型" width="98px">
          <template slot-scope="scope">
            <!-- <el-popover v-if="scope.row.productType" :content="scope.row.productType" placement="top" trigger="hover">
                  <span slot="reference" style="cursor:pointer">{{ scope.row.productType }}</span>
            </el-popover>-->
            {{ scope.row.groupType }}
            <!-- <span v-if="scope.row.productType === '0'">
                  增值产品
                </span>
                <span v-else>
                  基础产品
            </span>-->
          </template>
        </el-table-column>

        <el-table-column label="关联产品" width="125px">
          <template slot-scope="scope">
            <span
              v-for="item in scope.row.relatedProductsList"
              :key="item.id"
              class="productArr"
            >{{ item.name }}</span>
          </template>
        </el-table-column>

        <el-table-column label="关联资费策略" width="125px">
          <template slot-scope="scope">
            <span
              v-for="item in scope.row.tariffList"
              :key="item.id"
              class="productArr"
            >{{ item.tariffName }}</span>
          </template>
        </el-table-column>

        <el-table-column label="关联优惠策略" width="125px">
          <template slot-scope="scope">{{ scope.row.preferentialTariffBean.tariffName }}</template>
        </el-table-column>

        <el-table-column label="创建时间" width="125px">
          <template slot-scope="scope">
            <el-popover
              v-if="scope.row.createTime"
              :content="scope.row.createTime"
              placement="top"
              trigger="hover"
            >
              <span slot="reference" style="cursor:pointer">{{ scope.row.createTime }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column v-if="middleVal === 'first1'" label="审核状态" width="85px">
          <template slot-scope="scope">
            <span v-show="scope.row.reviewStatus === '0'">待提审</span>
            <span v-show="scope.row.reviewStatus === '1'">审核中</span>
            <span v-show="scope.row.reviewStatus === '2'">已通过</span>
            <span v-show="scope.row.reviewStatus === '3'">未通过</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="400">
          <template slot-scope="scope">
            <el-button
              v-powerbtn="{power: 'business-product-update'}"
              :disabled="scope.row.reviewStatus === '1'"
              type="primary"
              plain
              style="margin-left:0"
              size="mini"
              round
              @click="edit(scope.row.productGroupId, scope.row.id)"
            >编辑</el-button>
            <el-button
              v-powerbtn="{power: 'business-product-find'}"
              type="primary"
              plain
              style="margin-left:0"
              round
              size="mini"
              @click="watchDetails(scope.row.productGroupId, scope.row.id)"
            >查看</el-button>
            <!-- <el-button
              v-powerbtn="{power: 'business-product-copy'}"
              style="margin-left:0"
              type="primary"
              plain
              round
              size="mini"
              @click="copy(scope.row.productId, scope.row.id)"
            >复制</el-button>-->
            <el-button
              v-powerbtn="{power: 'business-product-onLineNo'}"
              type="primary"
              plain
              style="margin-left:0"
              size="mini"
              round
              @click="getVersion(scope.row.productGroupId, scope.row.id)"
            >上线版本</el-button>
            <el-button
              v-powerbtn="{power: 'business-product-downLine'}"
              :disabled="scope.row.productExistsStatus !== '1'"
              :type="scope.row.productExistsStatus !== '1' ? 'info' : 'primary'"
              round
              plain
              style="margin-left:0"
              size="mini"
              @click="uplineOne(scope.row.id)"
            >下线</el-button>
            <el-button
              v-powerbtn="{power: 'business-product-backCheck'}"
              :disabled="scope.row.reviewStatus !== '1'"
              :type="scope.row.reviewStatus !== '1' ? 'info' : 'primary'"
              style="margin-left:0"
              round
              plain
              size="mini"
              @click="recall(scope.row.id)"
            >撤回审核</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          :current-page.sync="pageid"
          :page-sizes="[20,50,100]"
          :page-size="pagecount"
          :total="count"
          background
          highlight-current-row
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <create-new
      :edit-obj="editObj"
      :watch-status="watchStatus"
      :create-dialog="createDialog"
      @closeCreate="closeCreate"
    />
    <up-line :version-dialog="versionDialog" :read-id="readId" :version-id="versionId" @closeVersion="closeVersion" />
  </div>
</template>

<script>
import powerbtn from '@/directive/powerbtn/index.js'
import { getAllchangeStatus, getAllchangeUpline, revocation } from '@/api/productGroup.js'
import { mapGetters } from 'vuex'
import upLine from './upline'
import createNew from './create.vue'
export default {
  directives: {
    powerbtn
  },
  components: {
    createNew: createNew,
    upLine: upLine
  },
  props: {
    // list
    listContent: {
      type: Array,
      default: () => []
    },
    // 數量
    listCount: {
      type: Number,
      default: 0
    },
    // 当前页数
    middlePageid: {
      type: Number,
      default: 1
    },
    // 本页条数
    middlePagecount: {
      type: Number,
      default: 20
    },
    middleVal: {
      type: String,
      default: 'first1'
    }
  },
  data() {
    return {
      statusCheck: [],
      versionDialog: false,
      readId: '',
      versionId: '',
      editObj: {},
      createDialog: false,
      productStatus: [],
      count: 0,
      status: 'first1',
      pageid: 1,
      pagecount: 20,
      watchStatus: false,
      list: []
    }
  },
  computed: {
    ...mapGetters(['plat']),
    // 提交审核
    checkStatus() {
      if (this.statusCheck.length > 0) {
        for (let i = 0; i < this.statusCheck.length; i++) {
          if (
            this.statusCheck[i] === '1' ||
            this.statusCheck[i] === '2' ||
            this.statusCheck[i] === '3'
          ) {
            return true
          }
        }
      }
      if (this.statusCheck.length === 0) {
        return false
      } else {
        return false
      }
    },
    // 下线
    changeOut() {
      if (this.productStatus.length > 0) {
        for (let i = 0; i < this.productStatus.length; i++) {
          if (this.productStatus[i] !== '1') {
            return true
          }
        }
      }
      if (this.productStatus.length === 0) {
        return false
      } else {
        return false
      }
    }
  },
  watch: {
    listContent(val) {
      this.pageid = this.middlePageid
      this.pagecount = this.middlePagecount
      this.count = this.listCount
      this.status = this.middleVal
      this.list = val
    }
  },
  mounted() {
    this.list = this.listContent
    this.count = this.listCount
    this.pageid = 1
    this.pagecount = 20
  },
  methods: {
    // 上线版本
    getVersion(prod, id) {
      this.versionDialog = true
      this.readId = id
      this.versionId = prod
    },
    closeVersion() {
      this.versionDialog = false
      this.readId = ''
      this.versionId = ''
    },
    // 提交审核
    getChangeStatus() {
      console.log(this.arr)
      if (!this.arr) {
        this.$message({
          type: 'error',
          message: '请至少勾选一条产品组'
        })
        return false
      }
      this.$confirm('确认提交审核吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        getAllchangeStatus({
          idList: this.arr
        }).then((res) => {
          if (res.resultCode === '0000') {
            this.$message({
              type: 'success',
              message: '提交审核成功'
            })
            this.$emit('reloadList')
          }
        })
      })
    },
    // 下线
    upline() {
      if (!this.arr) {
        this.$message({
          type: 'error',
          message: '请至少勾选一条产品组'
        })
        return false
      }
      this.$confirm('确认下线吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        getAllchangeUpline({
          idList: this.arr
        }).then((res) => {
          if (res.resultCode === '0000') {
            this.$message({
              type: 'success',
              message: '下线成功'
            })
            this.$emit('reloadList')
          }
        })
      })
    },
    uplineOne(id) {
      this.$confirm('确认下线吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        getAllchangeUpline({
          idList: [id]
        }).then((res) => {
          if (res.resultCode === '0000') {
            this.$message({
              type: 'success',
              message: '下线成功'
            })
            this.$emit('reloadList')
          }
        })
      })
    },
    watchDetails(prod, id) {
      this.watchStatus = true
      this.createDialog = true
      this.editObj = {
        productGroupId: prod,
        id: id
      }
    },
    // 编辑
    edit(productGroupId, id) {
      this.createDialog = true
      this.editObj = {
        productGroupId: productGroupId,
        id: id
      }
    },
    closeCreate() {
      this.createDialog = false
      this.watchStatus = false
      this.editObj = {}
      this.$emit('reloadList')
    },
    // 新建
    create() {
      this.createDialog = true
    },
    // 撤回审核
    recall(id) {
      // revocation
      this.$confirm('确认要撤回审核吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        revocation({
          idList: [id]
        }).then((res) => {
          if (res.resultCode === '0000') {
            this.$message({
              type: 'success',
              message: '撤回成功'
            })
            this.$emit('reloadList')
          }
        })
      })
      console.log('撤回审核')
    },
    // 多选
    handleSelectionChange(val) {
      if (val.length > 0) {
        this.arr = val.map((item) => {
          return item.id
        })
        this.statusCheck = val.map((item) => {
          return item.reviewStatus
        })
        this.productStatus = val.map((item) => {
          return item.productExistsStatus
        })
      }
      if (val.length === 0) {
        this.arr = []
        this.statusCheck = []
        this.productStatus = []
      }
    },
    // 页面条数改变
    handleSizeChange(num) {
      this.$emit('handleSizeChange', num)
    },
    // 跳页
    handleCurrentChange(num) {
      this.$emit('handleCurrentChange', num)
    }
  }
}
</script>

<style scoped>
.productArr {
  display: block;
  color: #409eff;
  cursor: pointer;
}
.productArr:hover {
  text-decoration: underline;
}
.inlineBlock {
  display: inline-block;
}
</style>
